<template>
    <div class="product">
        <h1 class="title" data-splitting="">小兔鲜儿商城产品介绍</h1>
        <div class="description">
            商城产品主要包括各类新鲜食品和日常用品，旨在为消费者提供高质量的生活选择。我们提供的产品种类丰富，从新鲜农产品到健康零食，应有尽有。此外，商城还会定期推出特价商品和限时抢购，帮助消费者以更实惠的价格购买优质商品。
            每一款产品都经过精心挑选，确保品质优良，满足顾客的需求。同时，我们的售后服务团队会全程跟进，确保顾客的购物体验顺畅无忧。欢迎您在小兔鲜儿商城选购，体验新鲜美味的生活！
        </div>
        <div class="description">
            我们的商城始终致力于引入更多优质的品牌和创新产品，以满足不同消费者的需求。未来，我们计划开展更多的线上活动，进一步促销和推广我们的产品，让消费者能够在购物的同时享受到更多的优惠和乐趣。此外，我们也会积极听取顾客的意见与建议，努力改进和提升我们的产品和服务，通过不断优化购物体验，让每位顾客都能感受到小兔鲜儿商城的用心与真诚。期待您的光临，与我们一起探索更多美味与品质！
        </div>
        <div class="product-list" v-infinite-scroll="loadingmore">
            <div class="product-item" v-for="product in products" :key="product.id">
                <img :src="product.image" :alt="product.name" class="product-image" />
                <h2 class="product-name">{{ product.name }}</h2>
                <p class="product-description">{{ product.description }}</p>
                <p class="product-price">价格：{{ product.price }} 元</p>
                <button @click="addToCart(product)">加入购物车</button>
            </div>
        </div>
        <div class="loading-spinner" v-loading="loading"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElInfiniteScroll, vLoading } from 'element-plus'
// 产品数据示例
const products = ref([
    {
        id: 1,
        name: '新鲜水果礼盒',
        description: '精选新鲜水果，健康美味，适合送礼自用。',
        price: 128.00,
        image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/72181/26/29397/103498/66da70f0Ff8ffd057/fbb0bc2d78d51e3b.jpg!q80.dpg',
    },
    {
        id: 2,
        name: '有机蔬菜套餐',
        description: '提供多种有机蔬菜，保证绿色健康。',
        price: 88.00,
        image: 'https://www.yinxiangmall.com/images/shopfw/main/2020/01/08/goods_img/imgurl_P_tm_580461745441_100.jpg',
    },
    {
        id: 3,
        name: '手工制作糕点',
        description: '新鲜出炉的手工糕点，香甜可口。',
        price: 48.00,
        image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.0pbGzzkwK2tyBg75JEl2UQHaHa?rs=1&pid=ImgDetMain',
    },
    {
        id: 4,
        name: '果蔬汁配料',
        description: '果蔬汁配料，营养均衡，满足你的味蕾。',
        price: 188.00,
        image: 'https://img.alicdn.com/i4/3885130253/O1CN01771yAc1Djuxbjhg2S_!!3885130253.jpg',
    },
    {
        id: 5,
        name: '手工制作沙拉',
        description: '手工制作的沙拉，营养丰富，满足你的味蕾。',
        price: 128.00,
        image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.mRfQ9LKDywORDRNRAYuGBQHaJ4?rs=1&pid=ImgDetMain',
    },
    {
        id: 6,
        name: '新鲜牛奶',
        description: '新鲜牛奶，健康营养，满足你的味蕾。',
        price: 128.00,
        image: 'https://img.alicdn.com/i1/2211896993853/O1CN01eybXJ61eKipsp70PX_!!2211896993853.jpg',
    },
    {
        id: 7,
        name: '中秋节礼盒',
        description: '送亲人,送礼,送祝福,送节日>_<。',
        price: 118.00,
        image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C._TCxACQdXRpiW386EsqetAHaFj?rs=1&pid=ImgDetMain',
    },
    {
        id: 8,
        name: '高质量被套',
        description: '高质量被套，舒适透气，防滑耐磨。',
        price: 428.00,
        image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.aLz2np0h9e3y5CwJGPlNjgHaIl?rs=1&pid=ImgDetMain'
    },
    {
        id: 9,
        name: '智能音响',
        description: '智能音响，高品质音质，享受生活。',
        price: 1288.00,
        image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xkB6Ea7598lcI35szhuXhAHaHa?rs=1&pid=ImgDetMain'
    },
    {
        id: 10,
        name: '智能手表',
        description: '智能手表，精准计步，享受生活。',
        price: 588.00,
        image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.RSGaSIqllulcSSSBuwcupAHaI4?rs=1&pid=ImgDetMain'
    },
    {
        id: 11,
        name: '智能电视',
        description: '智能电视，高清大屏，享受生活。',
        price: 1288.00,
        image: 'https://ts1.cn.mm.bing.net/th/id/R-C.e02d41cc07fb287ee3a9163bd134f6e1?rik=q9FrudqrgU3pvg&riu=http%3a%2f%2fqnz.smzdm.com%2f202110%2f26%2f61775c2dd85f88028.png_ban.jpg&ehk=OjPPBY4VTJb5n%2fsBPBgEin%2bKrvscwS3T9IkfeCehD3A%3d&risl=&pid=ImgRaw&r=0'
    },
    {
        id: 12,
        name: '智能手机',
        description: '智能手机，高性能，享受生活。',
        price: 1288.00,
        image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.9tiYco-vjTydwrYrs7DbdQHaHa?rs=1&pid=ImgDetMain'
    },
    // 可根据需求添加更多产品
]);
// 加载状态
const loading = ref(false)
// 添加到购物车的处理函数
const addToCart = (product) => {
    // 这里可以添加逻辑以处理购物车添加
    console.log(`已添加到购物车: ${product.name}`);
}
//当前页码
const currentPage = ref(1)
//pagesize
const pageSize = ref(10)
//总页数
//无限加载
const loadingmore = () => {
    products.value.push({
        id: products.value.length + 1,
        name: '新鲜水果礼盒',
        description: '精选新鲜水果，健康美味，适合送礼自用。',
        price: (Math.random() * 100).toFixed(2),
        image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/72181/26/29397/103498/66da70f0Ff8ffd057/fbb0bc2d78d51e3b.jpg!q80.dpg',
    })
    currentPage.value += 1
    if (currentPage.value > 10) {
        loading.value = false
    } else {
        loading.value = true
    }
}
onMounted(() => {
    loadingmore()
})
</script>

<style scoped lang="scss">
@-webkit-keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        letter-spacing: normal;
        opacity: 1;
    }
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        letter-spacing: normal;
        opacity: 1;
    }
}

.title {
    animation: tracking-in-contract 0.8s ease-in-out 1s both;
    font-size: 20px;
    font-weight: normal;
    font-family: '宋体';
}

.description {
    font-size: 20px;
    letter-spacing: 1px;
    text-indent: 2em;
    text-align: left;
    font-weight: normal;
    user-select: text;
    margin: 20px 0;
    font-family: '宋体';
}

.product {
    padding: 20px;
    text-align: center;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.product-item {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 10px;
    padding: 15px;
    width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.product-name {
    font-size: 18px;
    margin: 10px 0;
}

.product-description {
    font-size: 14px;
    color: #666;
}

.product-price {
    font-size: 16px;
    color: #ea5c5a;
    margin: 10px 0;
}

button {
    background-color: #27ba9b;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #219b87;
}
</style>